<template>
    <div>
        <el-row :gutter="20">
           <el-col :span="6">
                <el-input placeholder="请输入用户名" v-model="username" ></el-input>
           </el-col>
            <el-col :span="16">
                <el-button  type="primary" icon="el-icon-search" @click="querybyuname">查询</el-button>
            </el-col>
            <el-col :span="2">
                <el-button type="primary" icon="el-icon-edit" circle @click="add"> 添加</el-button>
            </el-col>
        </el-row>
        <br> <br>
        <el-table
                :data="systemUsers"
                style="width: 100%">
            <el-table-column
                    label="编号"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-edit"></i>
                    <span style="margin-left: 10px">{{scope.row.id}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="用户名"
                    width="180">
                <template slot-scope="scope" >
                    <el-popover trigger="hover" placement="top">
                        <p>用户名: {{scope.row.suName}}</p>
                        <p>密码: {{scope.row.suPwd}}</p>
                        <p>状态:<span v-if="scope.row.accountState==0">未冻结</span>
                            <span v-else>已冻结</span>
                        </p>
                        <div slot="reference" class="name-wrapper">
                            <el-tag size="medium">{{scope.row.suName}}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column
                    label="密码"
                    width="180">
                <template slot-scope="scope">
                    <i class="el-icon-s-tools"></i>
                    <span style="margin-left: 10px">{{scope.row.suPwd}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="头像"
                    width="180">
                <template slot-scope="scope">
                    <div >
                        <el-avatar :src="'http://127.0.0.1:9090/demo/'+scope.row.topImg"></el-avatar>
                    </div>
                </template>
            </el-table-column>
            <el-table-column
                    label="状态"
                    width="180">
                <template slot-scope="scope">
                    <i v-if="scope.row.accountState==0" class="el-icon-success"></i>
                    <i v-else class="el-icon-error"></i>
                    <span style="margin-left: 10px" v-if="scope.row.accountState==0">未冻结</span>
                    <span style="margin-left: 10px" v-else>冻结</span>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning"
                            plain
                            @click="edit(scope.row.id)">编辑</el-button>


                    <el-popconfirm v-if="scope.row.accountState==0"
                            confirm-button-text='确定'
                            cancel-button-text='取消'
                            icon="el-icon-info"
                            icon-color="red"
                            title="你确定冻结吗？"
                            @confirm="alterSystembyid(scope.row.id)"
                        >
                        <el-button
                                 plain
                                slot="reference"
                                size="mini"
                                type="danger"
                                icon="el-icon-error">冻结员工</el-button>
                    </el-popconfirm>


                    <el-popconfirm v-else
                            title="你确定解冻吗？"
                            @confirm="alterSystembyid(scope.row.id)"
                    >
                        <el-button
                                    plain
                                   slot="reference"
                                   size="mini"
                                   type="success"
                                   icon="el-icon-success"
                                   >解冻员工</el-button>
                    </el-popconfirm>

                    <el-button
                            size="mini"
                            type="primary"
                            icon="el-icon-edit"
                            plain
                            @click="drawerbyOpen(scope.row.id)">重置密码</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template>
            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="pageno"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pagesize"
                        layout="total, sizes, prev, pager   , next, jumper"
                        :total="total">
                </el-pagination>
            </div>
        </template>

        <el-dialog
                title="添加员工"
                :visible.sync="dialogVisible"
                width="35%"
                :before-close="handleClose">
            <component ref="staffadd" :is="cont"></component>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">关 闭</el-button>
  </span>
        </el-dialog>


        <el-dialog
                title="编辑"
                :visible.sync="dialogVisible"
                width="40%"
                :before-close="handleClose">
            <component ref="staffedit" :is="cont"></component>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">关 闭</el-button>
  </span>
        </el-dialog>




        <el-form  :model="ruleForm" status-icon  label-width="100px" class="demo-ruleForm">

            <el-drawer
                    title="新的密码"
                    :visible.sync="drawer01"
                    :before-close="handleClose03"
                    size="50%">
                <div>
                    <el-form-item label="新的密码" >
                        <el-input  type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="请再次输入新的密码" >
                        <el-input  type="password" v-model="ruleForm.uppwd" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-button @click="submitForm()">提交</el-button>
<!--                    <el-button @click="nenx">下一步</el-button>-->
<!--                    <el-drawer-->
<!--                            title="新的密码"-->
<!--                            :append-to-body="true"-->
<!--                            :before-close="handleClose02"-->
<!--                            :visible.sync="innerDrawer01">-->
<!--                        <p>-->
<!--                         -->
<!--                    </el-drawer>-->
                </div>
            </el-drawer>

        </el-form>

    </div>

</template>

<script>

    //添加员工
    import StaffAdd from "./StaffAdd";
    import StaffEdit from "./StaffEdit";

    export default {
        data() {
            var validatePass = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新的密码'));
                } else {
                    if (this.ruleForm.checkPass !== '') {
                        this.$refs.ruleForm.validateField('checkPass');
                    }
                    callback();
                }
            };
            var validatePass3 = (rule, value, callback) => {
                    if (value === '') {
                        callback(new Error('请再次输入密码'));
                    } else if (value !== this.ruleForm.uppwd) {
                        callback(new Error('两次输入密码不一致!'));
                    } else {
                        callback();
                    }
            };
            return {
                ruleForm: {
                    checkPass:"",
                    uppwd:"",
                    suPwd:""
                },
                pwd:"",
                drawer01: false,
                innerDrawer01: false,
                url:'http://127.0.0.1:9090/demo/',
                systemUsers:[],//用来存后端传来的数据
                username:"",//查询条件
                pageno:1,   //页码
                pagesize:5,   //页size
                total:1,   //查询到的总记录数量
                cont:"",
                dialogVisible: false
            }
        },
        conponents:{
            StaffAdd,
            StaffEdit,
        },
        methods: {
            //获取员工数据
            getdata(){
                var params = new URLSearchParams();
                params.append("pageno",this.pageno);
                params.append("pagesize",this.pagesize);
                params.append("suName",this.username)

                this.$axios.post("queryallUsers.action",params).
                then(response=>{
                    console.log(response.data.records)
                    this.systemUsers = response.data.records
                    this.total = response.data.total;
                }).
                catch()
            },
            //修改状态
            alterSystembyid(rowid){
                let id = new URLSearchParams();

                id.append("id",rowid)

                if (rowid!=sessionStorage.getItem("suid")) {
                    this.$axios.post("alterSystembyid.action",id).
                    then(request=>{
                        if (request.data.msg=="成功"){
                            this.getdata()
                            this. success02();
                        }else {
                            this. error01()
                        }
                    }).
                    catch()
                }else {
                    this.warning()
                }

            },
            handleEdit(index, row) {
                //console.log(index, row);
            },
            //添加
            add(cont){
                this.cont = StaffAdd;
                this.dialogVisible = true;
                //this.$refs.staffadd.submitForm();
            },
            //修改员工
            edit(id){
                this.cont = StaffEdit;
                this.dialogVisible = true;
                this.$nextTick(item=>{
                    this.$refs.staffedit.getid(id);
                    this.$refs.staffedit.getStaffRoles();
                })
            },
            //失败的方法
            error01() {
                this.$message.error('失败!');
            },
            //成功后调用的方法
            success02() {
                this.$message({
                    message: '完成',
                    type: 'success'
                });
            },
            warning() {
                this.$notify({
                    title: '警告',
                    message: '不能冻结自己你个呆瓜!',
                    type: 'warning'
                });
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },

            //---------分页查询----------//

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pagesize = val;
                this.getdata()
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageno = val;
                this.getdata()
            },
            querybyuname(){
              this.username = this.username
              this.getdata()
            },

            //-----修改密码-----//

            handleClose02(done) {
                this.$confirm('确定关闭吗')
                    .then(_ => {
                        done();
                        this.ruleForm.checkPass = ""
                        this.ruleForm.uppwd = ""
                        this.ruleForm.suPwd = ""
                    })
                    .catch(_ => {});
            },
            handleClose03(done) {
                this.$confirm('确定关闭吗')
                    .then(_ => {
                        done();
                        this.ruleForm.suPwd = ""
                        this.ruleForm.checkPass = ""
                        this.ruleForm.uppwd = ""
                    })
                    .catch(_ => {});
            },

            drawerbyOpen(id){
                this.drawer01 = true
                if (this.ruleForm.suPwd == this.pwd){
                    this.ruleForm.suPwd = ""
                }else{
                    this.$message.warning("密码输入错误");
                }
                // let users = new URLSearchParams()
                // users.append("id",id)
                sessionStorage.setItem("systemUser_id",id)
                // this.$axios.post("querybyid_Systemuser.action",users).
                // then(request=>{
                //     this.pwd = request.data.suPwd
                // }).
                // catch();
                //this.innerDrawer01 = true
            },
            // nenx(){
            //     if (this.ruleForm.suPwd == this.pwd){
            //         this.innerDrawer01 = true
            //         this.ruleForm.suPwd = ""
            //     }else{
            //         this.$message.warning("密码输入错误");
            //     }
            // },
            submitForm() {
                    let syUser = new URLSearchParams();
                    if(sessionStorage.getItem("systemUser_id")!=sessionStorage.getItem("id")){
                        if (this.ruleForm.checkPass == this.ruleForm.uppwd) {
                            syUser.append("suPwd",this.ruleForm.checkPass)
                            syUser.append("id",sessionStorage.getItem("systemUser_id"))
                            this.$axios.post("editPwd.action",syUser).
                            then(request=>{
                                if (request.data.msg == "修改成功"){
                                    // sessionStorage.removeItem("systemUser_id")
                                    this.$message.success("修改成功")
                                    this.getdata();
                                    this.ruleForm.checkPass = ""
                                    this.ruleForm.uppwd = ""
                                    this.ruleForm.suPwd = ""
                                    // this.innerDrawer01 = false
                                    this.drawer01 = false
                                }else{
                                    this.$message.error("修改失败")
                                }
                            }).catch()
                        } else {
                            this.$message.error("两次密码不一致！！")
                        }
                    }else {
                        this.$message.warning("当前账号正在操作中不能更改！！")
                    }
            },
        },
        created() {
            this.getdata()
        }
    }
</script>

<style scoped>

</style>